<template>
  <div class="map-container">
    <div class="map" :id="mapId"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      mapId: 'map' + new Date().getTime() + parseInt(Math.random() * 1000)
    };
  },
    computed: {
    systemInfo() {
        return this.$store.state.systemInfo;
    }
  },
  mounted() {
    if (window.AMap) {
      this.initMap();
    } else {
      window.addEventListener('mapReady', this.initMap);
    }
  },
  beforeDestroy() {
    this.map && this.map.destroy();
    window.removeEventListener('mapReady', this.initMap);
  },
  methods: {
    initMap() {
      console.log('初始化地图：', this.map);
      if (this.map) return;
      const locationCenter = this.$store.state.locationCenter;
      // 动态添加属性，防止Vue监听
      this.map = new AMap.Map(this.mapId, {
        mapStyle: 'amap://styles/normal',
        viewMode: '2D', //是否为3D地图模式
        zoom: 14, //初始化地图级别
        center: locationCenter
      });
      // 卫星地图切换
      this.map.addControl(new AMap.MapType());
      this.polygons = [];
      this.markers = [];
      this.polylines = [];
      this.circles = [];
    },
    createPolygonLayers(pathList) {
        if(!pathList ||!this.map) return;
        const list = []
        pathList.forEach(item => {
            const _location = this.getConvertLocation(2, item, '02')
            const pg = new AMap.Polygon({
                path: _location,
                strokeColor: '#FF33FF',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: '#1791fc',
                fillOpacity: 0.4
            });
            list.push(pg)
        })
        this.polygons = list;
        this.map.add(this.polygons);
        this.map.setFitView()
    },
    // 根据数据类型创建点线面
    createLayers(list) {
        try {
            list.forEach((item) => {
              if (item.type == 1) {
                //点
                this.createCircle(item);
              } else if (item.type == 2) {
                //面
                this.createPolygon(item);
              }
            });
            this.map.setFitView();            
        } catch (error) {
            console.log("error", error)
        }
    },
    // 创建面
    createPolygon(item) {
      if (!item.locations || !this.map) return;
      const _location = this.getConvertLocation(2, item.locations, '02')
      const pg = new AMap.Polygon({
        path: _location,
        strokeColor: '#FF33FF',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: '#1791fc',
        fillOpacity: 0.4
      });
      this.polygons.push(pg);
      this.map.add(pg);
    },
    // 创建点位
    createMarker(item) {
      if (!item.locations || !this.map) return;
      // 循环创建
      const _location = this.getConvertLocation(1, item.locations, '02')
      const mk = new AMap.Marker({
        position: _location,
        title: item.name || '--',
        anchor: 'bottom-center',
        label: {
          content: item.name || '--',
          direction: 'top'
        }
      });
      this.markers.push(mk);
      this.map.add(mk);
    },
    // 创建线
    createPolyline(item) {
      if (!item.location.length || !this.map) return;
      const _location = this.getConvertLocation(2, item.location, '02')
      const pl = new AMap.Polyline({
        path: _location,
        strokeColor: '#FF33FF',
        strokeWeight: 2
      });
      this.polylines.push(pl);
      this.map.add(pl);
    },
    // 创建圆
    createCircle(item) {
      if (!item.locations || !this.map) return;
      const _location = this.getConvertLocation(1, item.locations, '02')
      const cc = new AMap.Circle({
        // center: JSON.parse(item.locations), //圆心
        center: _location, //圆心
        radius: item.radius, //半径
        strokeColor: '#FF33FF',
        strokeWeight: 2,
        fillColor: '#1791fc',
        fillOpacity: 0.4
        // strokeStyle: 'dashed'
      });
      this.circles.push(cc);
      this.map.add(cc);
    },
    remove() {
      if (this.polygons.length) {
        this.map.remove(this.polygons);
      }
      if (this.markers.length) {
        this.map.remove(this.markers);
      }
      if (this.polylines.length) {
        this.map.remove(this.polylines);
      }
      if (this.circles.length) {
        this.map.remove(this.circles);
      }
      this.polygons = [];
      this.markers = [];
      this.polylines = [];
      this.circles = [];
    }
  }
};
</script>

<style scoped lang="scss">
.map-container {
  position: relative;
  .map {
    width: 100%;
    height: 100%;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}
</style>
